<template>
  <div
    class="hry-card-wrapper"
    @click="$commonJs.goPage('newsDetail', cardInfo.id)"
  >
    <div class="wrapper">
      <div class="hry-card-content">
        <span class="title">{{ str(htmlEncode(cardInfo.title), 30) }}</span>
        <p class="time">{{ cardInfo.create_time }}</p>
      </div>
      <div class="hry-card-pic">
        <img :src="$api.imgProjectUrl + cardInfo.litpic" :onerror="errorImg" />
      </div>
    </div>
  </div>
</template>

<script>
import { projectStatus, projectStatusClass } from "../../tool/status";
import { str } from "@/tool/lib";
export default {
  name: "index",
  props: {
    cardInfo: {
      type: Object
    }
  },
  data() {
    return {
      errorImg: 'this.src="' + require("@/assets/img/tulie.png") + '"'
    };
  },
  methods: {
    htmlEncode(text) {
      if (text) {
        var arrEntities = { lt: "<", gt: ">", nbsp: " ", amp: "&", quot: '"' };
        return text.replace(/&(lt|gt|nbsp|amp|quot);/gi, function(all, t) {
          return arrEntities[t];
        });
      } else {
        return "";
      }
    },
    str(text, length) {
      return str(text, length);
    },
    formatStatus(status) {
      return projectStatus(status);
    },
    formatStatusClass(status) {
      return projectStatusClass(status);
    }
  }
};
</script>

<style scoped lang="less">
.hry-card-wrapper {
  position: relative;
  margin: 16px;
  font-size: 0;
  overflow: hidden;
  padding: 19px 24px;
  background: #fbfafa;
  /*box-shadow: 0 0 10px rgba(203, 203, 203, 0.9);*/
  .wrapper {
    .flex_content();
    .hry-card-content {
      .flex_one();
      cursor: pointer;
      margin-right: 13px;
      .time {
        font-size: 20px;
        margin-top: 30px;
        color: #c2c2c2;
        text-align: right;
      }
      .title {
        display: inline-block;
        font-size: 28px;
        color: #000;
        line-height: 36px;
      }
    }
    .hry-card-pic {
      width: 293px;
      margin-left: 13px;
      img {
        width: 100%;
      }
    }
  }
}
</style>
